// src/assets/styles/global.scss

// 通用颜色变量
$primary-color: #409EFF;  // Element Plus 主色
$success-color: #67C23A;
$warning-color: #E6A23C;
$error-color: #F56C6C;

// 通用字体样式
$font-family: 'Helvetica Neue', Arial, sans-serif;
$font-size: 14px;
$line-height: 1.5;

// 通用边距和间距
$padding-base: 15px;
$margin-base: 15px;

// 通用样式
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



// 链接样式
a {
  color: $primary-color;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

// 表单
.el-form {
  margin-bottom: $margin-base;
}

.el-form-item {
  margin-bottom: 0;
}

// 按钮
.el-button {
  margin-right: 10px;

}


/* 窄抽屉 */
.drawer-narrow {
  width: 240px; /* 窄抽屉宽度 */
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  background-color: #fff; /* 背景色 */
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  overflow-y: auto; /* 允许垂直滚动 */
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}

/* 中等宽度抽屉 */
.drawer-medium {
  width: 300px; /* 中等宽度抽屉宽度 */
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  background-color: #fff; /* 背景色 */
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  overflow-y: auto; /* 允许垂直滚动 */
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}

/* 宽抽屉 */
.drawer-wide {
  width: 360px; /* 宽抽屉宽度 */
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  background-color: #fff; /* 背景色 */
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  overflow-y: auto; /* 允许垂直滚动 */
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}

/* 抽屉的展开和关闭动画效果 */
.drawer-open {
  transform: translateX(0); /* 显示抽屉 */
}

.drawer-close {
  transform: translateX(100%); /* 隐藏抽屉 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .drawer-narrow,
  .drawer-medium,
  .drawer-wide {
    width: 240px; /* 在小屏幕设备上调整宽度 */
  }
}

